<template>
  <div class="gouwucheliebiao">
    <div v-if="shu.length" class="gouwucheliebiaotop">
      <i class="iconfont icon-shouji"></i>
      <span>购物车</span>
    </div>
    <div v-if="shu.length" class="gouwucheliebiaomain">
      <div v-for="itmes in shu" :key="itmes.id">
        <gouwucheliebiaomaincoll @shan="fun($event)" :itme="itmes" :isxianshi="true" />
      </div>
      <div class="gouwucheliebiaomainfoot">
        <div class="left">
          <span>全选</span>
          <span>批量删除</span>
        </div>
        <div class="right">
          <span>商品总计 :</span>
          <span class="huang">
            ￥
            <span>{{zongzong(shu)}}</span>
          </span>
          <span class="goumai" @click="goumai">立即购买</span>
        </div>
      </div>
    </div>
    <div v-else class="gouwucheliebiaomainkong">
      <div>
        <i class="iconfont icon-sousuo"></i>
        <div>
          <div class="kongzi">您的购物车是空的</div>
          <div class="goumai">去首页看看</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import gouwucheliebiaomaincoll from "@/components/gouwucheliebiaomaincoll.vue";
import axios from "axios";
import "@/assets/font/iconfont.css";
export default {
  data() {
    return {
      shu: [
        // 没链接数据库可以使用假数据，关闭注释
        // {
        //   id: 1,
        //   name: "爱果果水果店",
        //   isxuanzhong: false,
        //   nini: [
        //     {
        //       id: 1,
        //       goodname: "爱果果水果店",
        //       guige: "8个装",
        //       danjia: "566",
        //       shiliang: 1,
        //       imgurl: "banner-13.png",
        //       isxuanzhong: false
        //     },
        //     {
        //       id: 2,
        //       goodname: "爱果果水果店",
        //       guige: "8个装",
        //       danjia: "566",
        //       shiliang: 1,
        //       imgurl: "banner-13.png",
        //       isxuanzhong: false
        //     },
        //     {
        //       id: 3,
        //       goodname: "爱果果水果店",
        //       guige: "8个装",
        //       danjia: "566",
        //       shiliang: 1,
        //       imgurl: "banner-13.png",
        //       isxuanzhong: false
        //     }
        //   ]
        // },
        // {
        //   id: 2,
        //   name: "爱果果水果店",
        //   isxuanzhong: false,
        //   nini: [
        //     {
        //       id: 1,
        //       goodname: "爱果果水果店",
        //       guige: "8个装",
        //       danjia: "566",
        //       shiliang: 1,
        //       imgurl: "banner-13.png",
        //       isxuanzhong: false
        //     },
        //     {
        //       id: 2,
        //       goodname: "爱果果水果店",
        //       guige: "8个装",
        //       danjia: "566",
        //       shiliang: 1,
        //       imgurl: "banner-13.png",
        //       isxuanzhong: false
        //     },
        //     {
        //       id: 3,
        //       goodname: "爱果果水果店",
        //       guige: "8个装",
        //       danjia: "566",
        //       shiliang: 1,
        //       imgurl: "banner-13.png",
        //       isxuanzhong: false
        //     }
        //   ]
        // }
      ]
    };
  },
  mounted() {
    var _this = this;
    var url = this.$store.state.url;
    axios.get(url + "gouwuche").then(
      res => {
        // 成功回调
        if (res.data.length) {
          window.console.log(res.data);
          _this.shu = [];
          _this.shu = res.data;
        }
      },
      res => {
        window.console.log(res);
        // 错误回调
      }
    );
  },
  methods: {
    fun(e){
      window.console.log(e)
    },
    goumai() {
      var arrshu = [];
      var _this = this;
      var i=0;
      _this.shu.map(function(item) {
      var zongjia =  _this.$options.methods.con(item);
        if (zongjia!=0) {
          arrshu[i] = {id:item.id,name:item.name}
          arrshu[i].nini = [];
          item.nini.map(function(it){
            if(it.isxuanzhong){
              arrshu[i].nini.push(it)
            }
          });
          i++
        }
      });
      localStorage.dingdanshuju = JSON.stringify(arrshu);
      this.$router.push("gouwudingdan");
      alert("提交数据");
    },
    con(e) {
      var zongjia = 0;
      e.nini.map(function(item) {
        if (item.isxuanzhong) {
          zongjia += item.danjia * item.shiliang;
        }
      });
      return zongjia;
    },
    zongzong(e) {
      var zongzong = 0;
      var _this = this;
      e.map(function(items) {
        zongzong += _this.$options.methods.con(items);
      });
      return zongzong;
    }
  },
  components: {
    gouwucheliebiaomaincoll
  }
};
</script>
<style scoped>
.gouwucheliebiao {
  width: 80%;
  margin: 0px auto;
}
.gouwucheliebiao .gouwucheliebiaotop {
  font-size: 1.5rem;
  line-height: 3rem;
}
.gouwucheliebiao .gouwucheliebiaotop .iconfont {
  font-size: 1.5rem;
  color: #f08200;
}
.gouwucheliebiaomaincoll {
  margin-bottom: 1rem;
}
.gouwucheliebiaomaincoll > div {
  display: flex;
  padding: 1rem;
  align-items: center;
}
.gouwucheliebiaomaincoll div .left {
  width: 30%;
  display: flex;
  justify-content: start;
  align-items: center;
}
.gouwucheliebiaomaincoll div .left img {
  width: 16%;
  border: 1px solid #ccc;
}
.gouwucheliebiaomaincoll div .right {
  width: 70%;
  display: flex;
  justify-content: space-between;
}
.gouwucheliebiaomaincoll > div:first-of-type {
  background: #f2f2f2;
  border: 1px solid #ccc;
  border-bottom: none;
}
.gouwucheliebiaomaincoll div .right > span {
  width: 100%;
  text-align: center;
}
.gouwucheliebiaomaincollbottom {
  border: 1px solid #ccc;
  border-top: none;
}
.gouwucheliebiaomaincollbottom .shanchu {
  color: #6da564;
}
.gouwucheliebiaomaincollbottom .left span {
  margin-left: 1rem;
}
input[type="checkbox"] {
  display: none;
}

.color-input-red + label {
  display: block;
  width: 1rem;
  height: 1rem;
  line-height: 1rem;
  cursor: pointer;
  border-radius: 2px;
  margin-right: 1em;
  border: 1px solid #ccc;
}
.color-input-red:checked + label {
  border: 1px solid #498e3d;
}
.color-input-red:checked + label::before {
  display: block;
  content: "\2714";
  text-align: center;
  font-size: 16px;
  color: white;
  color: #498e3d;
}

.shu {
  display: flex;
  justify-content: center;
}
.inputNum {
  border-top: 1px solid #d0d0d0;
  border-bottom: 1px solid #d0d0d0;
}
.inputNum input {
  vertical-align: middle;
  height: 1rem;
  border: none;
  text-align: center;
  outline: none;
}
.btn {
  display: inline-block;
  vertical-align: middle;
  background: #f0f0f0 no-repeat center;
  border: 1px solid #d0d0d0;
  width: 1.5rem;
  height: 1.5rem;
  box-shadow: 0 1px rgba(100, 100, 100, 0.1);
  color: #666;
  transition: color 0.2s, background-color 0.2s;
}

.btn:active {
  box-shadow: inset 0 1px rgba(100, 100, 100, 0.1);
}

.btn:hover {
  background-color: #e9e9e9;
  color: #333;
}

.btn_plus {
  background-image: linear-gradient(to top, currentColor, currentColor),
    linear-gradient(to top, currentColor, currentColor);
  background-size: 10px 2px, 2px 10px;
}

.btn_minus {
  background-image: linear-gradient(to top, currentColor, currentColor);
  background-size: 10px 2px;
}

.gouwucheliebiaomain .gouwucheliebiaomaincoll .gouwucheliebiaomaincollzongjia {
  display: flex;
  justify-content: flex-end;
  border: 1px solid #ccc;
  border-top: none;
}

.huang {
  color: #ff5757;
  font-size: 1.2rem;
  padding-left: 1rem;
}

.gouwucheliebiaomainfoot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 2rem 0px;
}
.gouwucheliebiaomainfoot .left span {
  color: #498e3d;
  padding: 0px 1rem;
  cursor: pointer;
}
.goumai {
  padding: 0.5rem 1.5rem;
  background-color: #f08200;
  color: #fff;
  border-radius: 3px;
  margin-left: 1rem;
  cursor: pointer;
}
.gouwucheliebiaomainkong {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20rem;
}
.gouwucheliebiaomainkong > div {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.gouwucheliebiaomainkong .iconfont {
  font-size: 5.6rem;
  color: #f08200;
  margin-right: 2rem;
}
.gouwucheliebiaomainkong .kongzi {
  line-height: 4rem;
}
.gouwucheliebiaomainkong .goumai {
  margin: 0px;
}
</style>